<template>
	<Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row  class="query-form2">
                <Col span="8">
                    <FormItem label="主题名称：">
                        <Input class="query-form-el" type="text" v-model="form1.themeName" ></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="负责人：" prop="possess">
                        <Input class="query-form-el" type="text" v-model="form1.possess" ></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button  class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>

        <Table ref='table' :height="tableHeight"   :loading="loading" @on-selection-change = 'getSelectRows'
                border :columns="columns1"  :data="dataTable">
        </Table>

        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>

        <Modal :title="title" :transfer=false :mask-closable="false" v-model="model1"  :width=600 >
            <Row>
                <Col span="24">
                    <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom"  label-position="top">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="活动主题：" prop="themeName">
                                    <Input type="text" v-model="form1datacopy.themeName" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="负责人：" prop="possess">
                                    <Input type="text" v-model="form1datacopy.possess" ></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="联系方式：" prop="phone">
                                    <Input type="text" v-model="form1datacopy.phone" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="主办单位：" prop="themeAddress">
                                    <Input type="text" v-model="form1datacopy.themeAddress" ></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="活动说明：" prop="themeAbstract">
                                    <Input type="text" v-model="form1datacopy.themeAbstract" ></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="开始时间：" prop="startDate">
                                    <DatePicker type="date"  format="yyyy-MM-dd" v-model="form1datacopy.startDate"  style="width: 100%"  placeholder="请选择" ></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="结束时间：" prop="endDate">
                                    <DatePicker type="date" format="yyyy-MM-dd"  v-model="form1datacopy.endDate"  style="width: 100%"  placeholder="请选择" ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="封面图片：">
                                    <Upload
                                            ref="upload"
                                            type="drag"
                                            :show-upload-list="true"
                                            :before-upload="beforeUpload"
                                            :action="downloadUrl"
                                            :max-size="10240"
                                    >
                                        <div style="padding: 20px 0">
                                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                            <p>点击或拖拽文件到这上传</p>
                                        </div>
                                    </Upload>
                                    <div v-if="fileName !== null">
                                        附件名称： {{ fileName }}
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <div slot="footer" class="query-form2">
                            <Button @click="handleCancel" class="ivu-btn-reset" >取消</Button>
                            <Button @click="submit('form1datacopy')" class="ivu-btn-query" :loading="buttonLoading">确定</Button>
                        </div>
                    </Form>
                </Col>
            </Row>
        </Modal>
        <Modal title="活动主题详情" :transfer=false v-model="model2"  :width=1000>
            <Row>
                <Col span="24">
                    <Form  :model="showdata"  :label-width="160">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="活动主题：" prop="themeName">
                                    {{showdata.themeName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="负责人：" prop="possess" >
                                     {{showdata.possess}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="联系方式：" prop="phone">
                                    {{showdata.phone}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="主办单位：" prop="themeAddress" >
                                     {{showdata.themeAddress}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="活动说明：" prop="themeAbstract">
                                    {{showdata.themeAbstract}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="开始时间：" prop="startDate">
                                    {{showdata.startDate}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="结束时间：" prop="endDate">
                                    {{showdata.endDate}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="附件：" prop="themeCover">
                                    <a :href="downloadUrl">{{fileName}}</a>
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="model2=false">关闭</Button>
            </div>
        </Modal>
	</layout>
</template>

<script>
	import {Api} from '../../../../api/index.js'
	export default {
		data() {
			return {
                buttonLoading: false,
                loading: false,
                title:"",
                switchFlag : false,
				form1: {
				},
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
				columns1: [
				    {
                        type: 'index',
                        title: '序号',
						width: 80,
						align: 'center',
					},
					{
                        minWidth: 300,
                        title: '主题名称',
                        align: 'center',
                        key: 'themeName',
					},
                    {
                        minWidth: 180,
                        title: '负责人',
                        key: 'possess',
                        align: 'center'
                    },
                    {
                        minWidth: 280,
                        title: '主办单位',
                        key: 'themeAddress',
                        align: 'center'
                    },
                    {
                        minWidth: 180,
                        title: '开始时间',
                        key: 'startDate',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',[
                                (this.formatDate(new Date(params.row.startDate), 'yyyy-MM-dd'))
                            ]);
                        }
                    },
                    {
                        minWidth: 180,
                        title: '结束时间',
                        key: 'endDate',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',[
                                (this.formatDate(new Date(params.row.endDate), 'yyyy-MM-dd'))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '12px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params,1);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        marginLeft: '8px'
                                    },
                                    on: {
                                        click: () => {
                                             this.showData(params,2);
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        marginLeft: '8px',
                                        color:'red'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '数据删除',
                                                content: '<p>确定删除该条信息</p>',
                                                okText: '确认',
                                                onOk: () => {
                                                    this.deleteData(params);
                                                },
                                                cancelText: '取消'
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
				],
                ruleCustom : {
                    themeName: [
                        { required: true, message: '  ', trigger: 'blur' }
                    ],
                    possess: [
                        { required: true, message: '  ', trigger: 'blur' }
                    ],
                    themeAddress: [
                        { required: true, message: '  ', trigger: 'blur' }
                    ],
                    startDate: [
                        { required: true,type: 'date' , message: '  ', trigger: 'change' }
                    ],
                    endDate: [
                        { required: true,type: 'date' , message: '  ', trigger: 'change' }
                    ],
                },
                form1datacopy : {
                    operateOrg: '',
                    workType: '',
                    workGrade: '',
                    planStartTime: new Date(),
                    planEndTime: new Date(),
                    planName: ''
                },
                dataTable: [],
                showdata: {},
                model1: false,
                model2: false,
                add: false,
                tableHeight : 10,
                file : null,
                fileName : null,
                downloadUrl : Api.downloadPTWSchemeFile,
                themeCover : '',
			}
		},
		mounted: function() {
            this.tableHeight = window.innerHeight - 220;
            this.query();
        },
		methods: {

            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },

            copyArray(arr) {
                return JSON.parse(JSON.stringify(arr));
            },

            beforeUpload(file) {
                this.file = file;
                this.fileName = file.name;
                return false;
            },

            showData(data, flag) {
                //根据ID查询附件
                this.buttonLoading = false;
                let url = Api.getPTWSchemeFile +'/' + data.row.themeCover;
                this.$http.get(url, {params: {}}).then((res) => {
                    //console.log(res)
                    this.themeCover = res.data.id;
                    this.fileName = res.data.fileName;
                    this.downloadUrl = Api.downloadPTWSchemeFile + '/' + res.data.id;
                }).catch(e => {
                    //console.log(e)
                    this.$Message.error("数据获取失败")
                })

                if (flag == 1) {
                    //查看页面
                    this.showdata = data.row;
                    this.showdata.startDate = this.formatDate(new Date(this.showdata.startDate), 'yyyy-MM-dd');
                    this.showdata.endDate = this.formatDate(new Date(this.showdata.endDate), 'yyyy-MM-dd');
                    this.model2 = true;
                } else {
                    //修改页面
                    this.title = "活动主题修改";
                    this.add = false;
                    this.form1datacopy = data.row;
                    this.model1 = true;
                }
            },

            getSelectRows (rows){
                this.deleteRows = rows;
            },

            deleteData(params) {
                let url = Api.deleteActivityTheme;
                this.$http.delete(url + '/' + params.row.id).then((res) => {
                    this.$Message.success('成功');
                    this.query()
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },

            query() {
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize
                }
                this.loading = true;
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

                let url = Api.queryActivityTheme;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.loading = false;
                    this.pagedata.total = res.data.data.totalSize;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {}
            },
            handleCancel() {
                this.form1datacopy = {};
                this.model1 = false;
                this.file = null;
                this.fileName = null;
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                     if (valid) {
                         this.buttonLoading = true;
                         if(this.add) {
                             if (this.file!=null){
                                 const file = this.file;
                                 let formData = new FormData();
                                 formData.append("file", file);
                                 this.$http.put(Api.uploadMongoFile, formData).then((res) => {
                                     if (res.data.result == "success") {
                                         this.form1datacopy.startDate = this.formatDate(new Date(this.form1datacopy.startDate), 'yyyy-MM-dd');
                                         this.form1datacopy.endDate = this.formatDate(new Date(this.form1datacopy.endDate), 'yyyy-MM-dd');
                                         this.form1datacopy.themeCover = res.data.id;
                                         this.$http.post(Api.saveActivityTheme, this.form1datacopy).then((res) => {
                                             this.$Message.success("保存成功")
                                             this.model1 = false;
                                             this.query();
                                             this.buttonLoading = false;
                                         }).catch(e => {
                                             this.model1 = false;
                                             this.query();
                                             //console.log(e)
                                         });
                                     } else {
                                         this.$Message.error("附件上传失败");
                                     }
                                 }).catch(e => {
                                     this.model1 = false;
                                     this.query();
                                     this.$Message.error("数据获取失败")
                                 })
                             }else{
                                 this.form1datacopy.startDate = this.formatDate(new Date(this.form1datacopy.startDate), 'yyyy-MM-dd');
                                 this.form1datacopy.endDate = this.formatDate(new Date(this.form1datacopy.endDate), 'yyyy-MM-dd');

                                 this.$http.post(Api.saveActivityTheme, this.form1datacopy).then((res) => {
                                     this.$Message.success("保存成功")
                                     this.model1 = false;
                                     this.query();
                                     this.buttonLoading = false;
                                 }).catch(e => {
                                     this.model1 = false;
                                     this.query();
                                     console.log(e)
                                 })
                             }
                         }else{
                             if (this.file!=null){
                                 const file = this.file;
                                 let formData = new FormData();
                                 formData.append("file", file);
                                 this.$http.put(Api.uploadMongoFile, formData).then((res) => {
                                     if (res.data.result == "success") {
                                         this.form1datacopy.startDate = this.formatDate(new Date(this.form1datacopy.startDate), 'yyyy-MM-dd');
                                         this.form1datacopy.endDate = this.formatDate(new Date(this.form1datacopy.endDate), 'yyyy-MM-dd');
                                         this.form1datacopy.themeCover = res.data.id;
                                         this.$http.post(Api.updateActivityTheme, this.form1datacopy).then((res) => {
                                             this.$Message.success("保存成功")
                                             this.model1 = false;
                                             this.query();

                                         }).catch(e => {
                                             this.model1 = false;
                                             this.query();
                                             console.log(e)

                                         })
                                     } else {
                                         this.$Message.error("附件上传失败");
                                     }
                                 }).catch(e => {
                                     this.model1 = false;
                                     this.query();
                                     this.$Message.error("数据获取失败")
                                 })
                             }else{
                                 this.form1datacopy.startDate = this.formatDate(new Date(this.form1datacopy.startDate), 'yyyy-MM-dd');
                                 this.form1datacopy.endDate = this.formatDate(new Date(this.form1datacopy.endDate), 'yyyy-MM-dd');
                                 this.$http.post(Api.updateActivityTheme, this.form1datacopy).then((res) => {
                                     this.$Message.success("保存成功")
                                     this.model1 = false;
                                     this.query();

                                 }).catch(e => {
                                     this.model1 = false;
                                     this.query();
                                     console.log(e)

                                 })
                             }
                         }
                     } else {
                        this.$Message.error('请填报完整!');
                     }
                })
            },
            addInfo() {
                this.title = "活动主题新增";
                this.form1datacopy = {};
                this.add = true;
                this.model1 = true;
                this.file = null;
                this.fileName = null;
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        },
	}
</script>
<style lang='css' scoped>
    @import '../../../../index.css';

</style>
